<template>
  <div id="main" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      const animationDuration = 1500

      const barName = ['区域A', '区域A', '区域A', '区域A', '区域A']
      const rzData= [35, 40, 65, 30, 45]
      const lzData= [35, 45, 30, 38, 25]

      this.chart.setOption ({
        title: {
          text: '历史趋势分析'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['漏损量', '漏损率']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
          }
        ],
        yAxis: [
          {
            axisTick: {
              show: false // 隐藏Y轴刻度线
            },
            type: 'value',
            min: 80,
            max: 100,
            splitNumber : 3,
            scale: true, //自适应
          }
        ],
        series: [
          {
            name: '漏损量',
            type: 'line',
            stack: 'leakage amount',
            emphasis: {
              focus: 'series'
            },
            color: 'rgba(234,196,34)',
            lineStyle: {
              color: 'rgba(234,196,34)' // 设置线的颜色为红色
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(234,196,34,0.8)'
                },
                {
                  offset: 1,
                  color: 'rgba(234,196,34,0.001)'
                }
              ])
            },
            data: [87, 88, 90, 89, 91, 92, 91.5, 92, 90, 87, 90, 88]
          },
          {
            name: '漏损率',
            type: 'line',
            stack: 'leakage rate',
            emphasis: {
              focus: 'series'
            },
            color: 'rgba(121,182,66)',
            lineStyle: {
              color: 'rgba(121,182,66)' // 设置线的颜色为红色
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(121,182,66,0.8)'
                },
                {
                  offset: 1,
                  color: 'rgba(121,182,66,0.001)'
                }
              ])
            },
            data: [90, 85, 90, 95, 93, 90, 89, 88.5, 88, 89, 91, 92]
          }
        ]
      })
    }
  }
}
</script>

